<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="icon" type="image/png" href="/favicon.png" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <title>qwen-code-cli-UI</title>

  <!-- PWA Manifest -->
  <link rel="manifest" href="/manifest.json" />

  <!-- iOS Safari PWA Meta Tags -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="qwen UI" />

  <!-- iOS Safari Icons -->
  <link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152x152.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-192x192.png" />

  <!-- Theme Color -->
  <meta name="theme-color" content="#ffffff" />
  <meta name="msapplication-TileColor" content="#ffffff" />

  <!-- Prevent zoom on iOS -->
  <meta name="format-detection" content="telephone=no" />

  <!-- Critical CSS to prevent layout shift -->
  <style>
    /* Prevent layout shift during loading */
    html,
    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      min-height: 100vh;
    }

    #root {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Prevent FOUC (Flash of Unstyled Content) */
    .no-fouc {
      visibility: hidden;
      opacity: 0;
    }

    /* Loading skeleton styles */
    .skeleton {
      background: linear-gradient(90deg,
          #f0f0f0 25%,
          #e0e0e0 50%,
          #f0f0f0 75%);
      background-size: 200% 100%;
      animation: loading 1.5s infinite;
    }

    @keyframes loading {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>

  <!-- Service Worker Registration -->
  <script>
    if (
      "serviceWorker" in navigator &&
      location.hostname !== "localhost" &&
      location.hostname !== "127.0.0.1"
    ) {
      window.addEventListener("load", () => {
        navigator.serviceWorker.register("/sw.js")
          .then(() => {
            // Service worker registered successfully
          })
          .catch(() => {
            // Service worker registration failed
          });
      });
    }
  </script>
</body>

</html>